<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>博客首页</title>
<script type="text/javascript" src="common/component/jquery/jquery-1.7.1.js"></script>
<script type="text/javascript" src="common/component/word/sprite.js"></script>
<script type="text/javascript" src="common/component/word/word.js"></script>
<style type="text/css">

	body {
		margin: 0;
	}
	
</style>
</head>
<body>

	<canvas id="canvas" style="background-color:gray;"></canvas>
	
</body>

<script type="text/javascript">


	var words = ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z", "1", "2", "3", "4", "5", "6", "7", "8", "9", "0"];
	var colors = ["black", "white"];
	var startLocation = {
		x:($(document).width() - 700) / 2,
		y:100
	};

	$(document).ready(function(){

		$.each(words, function(inx,obj){
			var randomInx = parseInt(Math.random() * 30 + 5);
			var tempWord = words[randomInx];
			words[randomInx] = words[inx];
			words[inx] = tempWord;
		});
		
		var canvas = document.getElementById('canvas');
		canvas.width = $(document).width();
		canvas.height = $(document).height();
		
		var context = canvas.getContext('2d');

		var rowInx = 1;
		$.each(words, function(inx,obj){
			if(inx == 12 || inx == 24) {
				rowInx++;
			}
			var x = startLocation.x + (inx - (rowInx - 1)*12) * 60;
			var y = startLocation.y + (rowInx - 1) * 60;
			var bgColorInx = parseInt(1 + Math.random() * 10 / 5);
			var fontColorInx = bgColorInx == 1 ? 1 : 0;
			var temp = new Word();
			temp.draw(context, 55, 55, x, y, colors[bgColorInx - 1], colors[fontColorInx], obj);
		});
		
		
	});
	
	

	var Circle = function(ctx, x, y, radius, config) {
		this.ctx = ctx;
		this.x = x;
		this.y = y;
		this.radius = radius;
		this.config = {
			strokeStyle:"#000",
			lineWidth:"1"
		}
		//M.dom.mixin(this.config, config);
	}
	Circle.prototype = new Sprite();
	Circle.prototype.draw = function() {
		this.ctx.beginPath();
		this.ctx.lineWidth = this.config.lineWidth;
		this.ctx.strokeStyle =this.config.strokeStyle;
		this.ctx.arc(this.x,this.y,this.radius,0,Math.PI*2,true)
		this.ctx.stroke();
		this.ctx.stroke();
	}

</script>

</html>